<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录界面</title>
		<!--引入bootstra文件-->
		<link href="../command/Bootstrap/bootstrap-3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
		<link href="../command/Bootstrap/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet" />
		
		<script src="../command/jquery-3.4.0.min.js"></script>
		<script type="text/javascript" src="../js/login.js"></script>
		

		<script type="application/javascript">
			$(function(){
				$("#submituser").click(function(){
					//alert("提交按钮事件");				
						var username=$("#txtusername").val();
						var pwd=$("#pswd").val();
						//alert(username+"-------"+pwd);
						logo();
							$.getJSON("../json/login.json",function(data){
							console.log(data);
							if(username!="" &&pwd!=""){
								//if(username != data.name && pwd != data.pswd){
								//alert("hello");
								
							if(username == data.name && pwd == data.pswd){
								alert("登录成功");
								location.href="../index.html";
								
						}else{
							alert("输入用户名或密码错误，请重试");
								$("#txtusername").val("");
								$("#pswd").val("");
								$("#yanzheng").val("");
							}
						}
					});
					
				});
				$("#resetuser").click(function(){
				$("#txtusername").val("");
				$("#pswd").val("");
				$("#yanzheng").val("");
			});

			});
					</script>
		
	</head>
	<body style="background-image:url(../img/676682.jpg);">
		
		<!--总的控制内容-->
		<div class="container">
			<!--栅格-->
			<div class="col-md-12">
				<!--头部-->
				<div class="col-md-3"></div>
				<!--中间主体部分-->
				<div class="col-md-6">
					<div class="panel panel-primary" style="margin-top: 100px;">
						<!--登录框的头部（标题）-->
						<div class="panel-heading">电厂信息业务支撑平台</div>
						<!--登录窗口-->
						<div class="panel-body" style="background-image: url(../img/676681.jpg);">
							<!--设置用户名组-->
							<div class="input-group">
								<!--添加图片-->
								<span class="input-group-addon">
									<span class="glyphicon glyphicon-user"></span>
								</span>
								<!--添加文本框-->
								<input class="form-control" type="text" name="txtusername" id="txtusername" maxlength="20" placeholder="请输入用户名" />
							</div>
							<br />
							<!--设置密码组-->
							<div class="input-group">
								<!--添加图片-->
								<span class="input-group-addon">
									<span class="glyphicon glyphicon-lock"></span>
								</span>
								<!--添加文本框-->
								<input class="form-control"  type="password" name="pswd" id="pswd" maxlength="16" placeholder="请输入密码" />
							</div>
							<br />
							<!--设置验证码-->
							<div class="input-group horizontal">
								<!--添加文本框-->
								<input class="form-control" type="text" name="yanzheng" id="yanzheng" maxlength="10" placeholder="请输入验证码"/>	
								<!--添加图片-->
								<img alt="加载图片失败 " src="../img/verify.png " style="position: absolute; height: 33px; margin-left: 50px; "/>
							</div>
							<br />
							<!--设置按钮组-->
							<div class="btn text-center " style="width: 95%;">
								<!--在中心位置显示-->
								<center>
									<!--提交和重置-->
									<button type="button" id="submituser" class="btn btn-success " >提交</button>
									<button type="reset" id="resetuser" class="btn btn-danger" >重置</button>
								</center>
							</div>

						</div>
					</div>
				</div>
				<!--底部-->
				<div class="col-md-3 "></div>
			</div>
		</div>
	
	</body>
</html>
